<template>
  <div>
    <!--
    el-table 表明这是个table表格
    :data 它是这个表格要展示的数据
    style="width: 100%" 设置表格的宽度
    stripe  带斑马纹的表格
    border 带边框的表格
    -->
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="记录">
        <el-input v-model="query.keyword" placeholder="请输入记录"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getclueremarks">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="pageInfo.rows"
        stripe
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <!--el-table-column 这是表示表格的列
      prop 就是你这一列要展示的数据的属性名
      label 该列的表头标题
      width  该列所占的宽度-->
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="note_content"
          label="记录">
      </el-table-column>
      <el-table-column
          prop="create_by"
          label="创建人">
      </el-table-column>
      <el-table-column
          prop="create_time"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="edit_by"
          label="编辑人"
          width="200">
      </el-table-column>
      <el-table-column
          prop="edit_time"
          label="编辑时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="clue.id"
          label="线索id"
          width="200">
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
    </el-pagination>

  </div>

</template>

<script>
export default {
  data() {
    return {
      clueremark: {
        'id': null,
        'note_content': "",
        'create_by':"",
        'create_time': "",
        'edit_by': "",
        'edit_time': "",
        clue: {
          id:"",
          full_name:""
        },
        parent:null
      },
      clues:[],
        pageInfo: {
          rows: [],
          total: null
        },
        query: {
          currentPage: 1,//起始页
          pageSize: 10,//当前页条数
          keyword: ""
        },
        selectValue: [],
        dialogFormVisible: false,
        loading: false,
        clueremarkFormRules: {
          appellation: [
            {required: true, message: '请输入称呼', trigger: 'blur'}
          ]
        }
      }
    },
  methods: {
    getclues() {//获取用户数据
      this.$http.get("/clue")
          .then(result=>{
            result=result.data
            if (result.success){
              this.showMessage("成功","删除成功")
              this.clues=result.result
            }else {
              this.showMessage("失败","删除失败")
            }
          })
    },
    save: function () {
      this.$http.put("/clueRemark",this.clueremark)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.showMessage("成功", "保存成功")
              this.loading = false;
              this.query.currentPage = 1;
              this.getclueremarks();
              this.dialogFormVisible = false;
            } else {
              this.showMessage("失败", "保存失败")
            }
          }).catch(result => {
        this.showMessage("取消", "取消保存")
      })
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.currentPage = 1;
      this.getclueremarks()
    },
    handleCurrentChange(val) {//当前页
      this.query.currentPage = val
      this.getclueremarks()
    },
    showMessage(type, message) {
      if (type == "成功") {
        this.$message({
          type: "success",
          message: message
        })
      }
      if (type == "失败") {
        this.$message({
          type: "error",
          message: message
        })
      }
      if (type == "取消") {
        this.$message({
          type: "info",
          message: message
        })
      }
    },
    getclueremarks() {//获取用户数据
      this.$http.post("/clueRemark", this.query)
          .then(result => {
            this.pageInfo = result.data.result
            console.log(this.pageInfo)
          })
    }
  },
    mounted() {
      this.getclueremarks()//回显
        }

  }
</script>
